<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}

			.overflow {
				overflow: hidden;
			}

			.mui-plus.mui-android header.mui-bar {
				display: none;
			}

			.mui-plus.mui-android .mui-bar-nav~.mui-content {
				padding: 0;
			}

			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}

			.mui-col-xs-3,
			.mui-col-xs-9 {
				overflow-y: auto;
				height: 100%;
			}

			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}

			.mui-control-content {
				display: block;
			}

			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			/* img 去掉 */

			.mui-control-content img {
				display: block;
				width: 100%;
				max-height: 200px;
			}

			.mui-bar.mui-bar-tab {
				background-color: rgba(53, 52, 52, 1);
			}

			.mui-bar.mui-bar-tab img {
				display: block;
				width: 36px;
				height: 36px;
				border-radius: 18px;
			}

			.img_num {
				height: 36px;
				width: 36px;
				margin: 7px;
				position: relative;
			}

			.img_num span {
				position: absolute;
				right: -4px;
				top: -4px;
				display: block;
				width: 14px;
				height: 14px;
				line-height: 14px;
				text-align: center;
				border-radius: 7px;
				background-color: red;
				color: white;
				font-size: 12px;
			}

			.sendBtn {
				width: 28%;
				text-align: center;
				line-height: 50px;
				border-left: 1px solid #49483E;
				background-color: rgb(39, 40, 34);
			}

			p {
				margin-bottom: 0;
			}

			._sum .sum_money {
				font-size: 22px;
				line-height: 28px;
				color: #fff;
			}

			.empty {
				line-height: 50px;
				font-size: 16px;
			}

			.toChoose {
				font-size: 16px;
			}

			.sendBtn .send {
				font-size: 16px;
				background-color: orange;
				color: #fff;
			}

			.mui-content {
				margin-bottom: 50px;
			}

			.mui-control-content {
				border-bottom: 1px solid #ccc;
				padding: 10px 8px;
				background-color: white;
			}

			.orderTime,
			.buyAgain {
				margin-bottom: 5px;
			}

			.orderTime i {
				margin-right: 10px;
			}

			.orderTime span {
				margin-left: 30px;
			}

			.buyAgain .btn {
				width: 100px;
			}

			.buyAgain .btn a {
				margin-left: 11px;
				display: inline-block;
				height: 30px;
				line-height: 30px;
				padding: 0 10px;
				border: 1px solid #EFEFF4;
				border-radius: 15px;
				font-size: 14px;
				color: #000;
			}

			.buyAgain .typeName {
				font-size: 14px;
			}

			.mui-control-content .mui-ellipsis:first-child {
				font-size: 12px;
			}

			.mui-control-content .mui-ellipsis:last-child {
				color: red;
			}

			.mui-control-content .mui-table-view img {
				max-width: 60px;
				height: 60px;
			}
			/* 去下边框 */

			.mui-table-view-cell:after {
				height: 0;
			}

			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}

			.mui-table-view-cell {
				padding: 11px 8px;
			}

			.mui-control-content .titleName {
				line-height: 21px;
			}

			.mui-control-content .titleName .border {
				display: inline-block;
				width: 4px;
				height: 21px;
				background-color: #f99707;
				vertical-align: top;
				margin-right: 5px;
			}

			.mui-control-content .mui-media-body .price {
				color: red;
				font-size: 16px;
			}

			.mui-control-content .mui-media-body {
				position: relative;
			}

			.mui-control-content .mui-media-body .add_remove {
				position: absolute;
				right: 5px;
				bottom: 10px;
			}

			.mui-control-content .mui-media-body .add_remove i {
				display: inline-block;
				font-style: normal;
				width: auto;
				height: 20px;
				text-align: center;
				line-height: 20px;
			}

			.mui-control-content .mui-media-body .add_remove i.add,
			.mui-control-content .mui-media-body .add_remove i.del {
				width: 20px;
				border: 1px solid #EFEFF4;
				border-radius: 10px;
			}

			.mui-control-content .mui-media-body .add_remove i.add {
				background-color: #f99707;
			}

			.mui-control-content .mui-media-body .zhekou {
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<!--主要内容区域-->
		<div class="mui-content mui-row mui-fullscreen" id="detail_1">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<a class="mui-control-item mui-active" href="#item1" data-index='0'>
						<span class="mui-icon iconfont icon-shengxian"></span>
						<span class="mui-tab-label">买过</span>
					</a>
					<a class="mui-control-item" href="#item2" data-index='1'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">热销</span>
					</a>
					<a class="mui-control-item" href="#item3" data-index='2'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">折扣</span>
					</a>
					<a class="mui-control-item" href="#item4" data-index='3'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">特辣</span>
					</a>
					<a class="mui-control-item" href="#item5" data-index='4'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">菜品Type1</span>
					</a>
					<a class="mui-control-item" href="#item6" data-index='5'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">菜品Type2</span>
					</a>
					<a class="mui-control-item" href="#item7" data-index='6'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">菜品Type3</span>
					</a>
					<a class="mui-control-item" href="#item8" data-index='7'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">菜品Type4</span>
					</a>
					<a class="mui-control-item" href="#item9" data-index='8'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">菜品Type5</span>
					</a>
					<a class="mui-control-item" href="#item10" data-index='9'>
						<!--<span class="mui-icon iconfont icon-shengxian"></span>-->
						<span class="mui-tab-label">菜品Type6</span>
					</a>
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9">
				<div id="item1" class="mui-control-content mui-active buy">
					<p class="orderTime"><i class="mui-icon mui-icon-loop"></i>一天前点过的订单 <span class="money">￥29</span></p>
					<div class="buyAgain overflow">
						<div class="typeName mui-pull-left">鱼香肉丝盖浇饭,辣子鸡丁盖浇饭,回锅肉盖浇饭</div>
						<div class="btn mui-pull-right">
							<a>再来一单</a>
						</div>
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<p class="titleName"><i class="border"></i>热销</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del" @click="addNum($event)">-</i>
										<i class="num">1</i>
										<i class="add" @click="addNum($event)">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
					<p class="titleName"><i class="border"></i>折扣商品（超过限购份数可原价购买）</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									大盘鸡
									<p class="mui-ellipsis">月销8 <span>赞0</span></p>
									<p class="mui-ellipsis price">￥68.6</p>
									<p class="zhekou price"><i class="mui-icon mui-icon-paperplane"></i>7折 限一份</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item4" class="mui-control-content">
					<p class="titleName"><i class="border"></i>特辣</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item5" class="mui-control-content">
					<p class="titleName"><i class="border"></i>菜品Type1</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item6" class="mui-control-content">
					<p class="titleName"><i class="border"></i>菜品Type2</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item7" class="mui-control-content">
					<p class="titleName"><i class="border"></i>菜品Type3</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item8" class="mui-control-content">
					<p class="titleName"><i class="border"></i>菜品Type4</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item9" class="mui-control-content">
					<p class="titleName"><i class="border"></i>菜品Type5</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div id="item10" class="mui-control-content">
					<p class="titleName"><i class="border"></i>菜品Type6</p>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
						<li class="mui-table-view-cell mui-media">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="images/timg2.jpg">
								<div class="mui-media-body">
									土豆牛腩盖浇饭
									<p class="mui-ellipsis">月销144 <span>赞11</span></p>
									<p class="mui-ellipsis price">￥20</p>
									<div class="add_remove">
										<i class="del">-</i>
										<i class="num">1</i>
										<i class="add">+</i>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<div class="img_num mui-pull-left">
				<img src="images/timg1.jpg" alt="" />
				<span id="sum">4</span>
			</div>
			<div class="msg mui-pull-left">
				<p class="empty">另需配送费￥5</p>
				<!--<div class="_sum">
					<p class="sum_money">￥10</p>
					<p>另需配送费￥5</p>
				</div>-->
			</div>
			<div class="sendBtn mui-pull-right">
				<p class="toChoose">差￥10起送</p>
				<!--<p class="send">去结算</p>-->
			</div>
		</nav>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: '#detail_1',
				data: {},
				mounted: function() {
					this.init();
				},
				methods: {
					init: function() {

						mui.plusReady(function() {
							var self = plus.webview.currentWebview(); //获取当前窗体对象
							var thisId = self.shopId; //接受上一页面传过来的值；
							console.log('接收到类型ID值:' + thisId)
						});

						var winW = $('.buyAgain').width(),
							dtW = $('.buyAgain .btn').width(),
							ddW = (winW - dtW) + 'px';
						$('.typeName').width(ddW)

						mui.init({
							swipeBack: true //启用右滑关闭功能
						});
						var controls = document.getElementById("segmentedControls");
						var contents = document.getElementById("segmentedControlContents");
						//默认选中第一个
						controls.querySelector('.mui-control-item').classList.add('mui-active');
						//			contents.querySelector('.mui-control-content').classList.add('mui-active');
						(function() {
							var controlsElem = document.getElementById("segmentedControls");
							var contentsElem = document.getElementById("segmentedControlContents");
							var controlListElem = controlsElem.querySelectorAll('.mui-control-item');
							var contentListElem = contentsElem.querySelectorAll('.mui-control-content');
							var controlWrapperElem = controlsElem.parentNode;
							var controlWrapperHeight = controlWrapperElem.offsetHeight;
							var controlMaxScroll = controlWrapperElem.scrollHeight - controlWrapperHeight; //左侧类别最大可滚动高度
							var maxScroll = contentsElem.scrollHeight - contentsElem.offsetHeight; //右侧内容最大可滚动高度
							var controlHeight = controlListElem[0].offsetHeight; //左侧类别每一项的高度
							var controlTops = []; //存储control的scrollTop值
							var contentTops = [0]; //存储content的scrollTop值
							var length = contentListElem.length;
							for(var i = 0; i < length; i++) {
								controlTops.push(controlListElem[i].offsetTop + controlHeight);
							}
							for(var i = 1; i < length; i++) {
								var offsetTop = contentListElem[i].offsetTop;
								if(offsetTop + 100 >= maxScroll) {
									var height = Math.max(offsetTop + 100 - maxScroll, 100);
									var totalHeight = 0;
									var heights = [];
									for(var j = i; j < length; j++) {
										var offsetHeight = contentListElem[j].offsetHeight;
										totalHeight += offsetHeight;
										heights.push(totalHeight);
									}
									for(var m = 0, len = heights.length; m < len; m++) {
										contentTops.push(parseInt(maxScroll - (height - heights[m] / totalHeight * height)));
									}
									break;
								} else {
									contentTops.push(parseInt(offsetTop));
								}
							}
							contentsElem.addEventListener('scroll', function() {
								var scrollTop = contentsElem.scrollTop;
								for(var i = 0; i < length; i++) {
									var offsetTop = contentTops[i];
									var offset = Math.abs(offsetTop - scrollTop);
									//						console.log("i:"+i+",scrollTop:"+scrollTop+",offsetTop:"+offsetTop+",offset:"+offset);
									if(scrollTop < offsetTop) {
										if(scrollTop >= maxScroll) {
											onScroll(length - 1);
										} else {
											onScroll(i - 1);
										}
										break;
									} else if(offset < 20) {
										onScroll(i);
										break;
									} else if(scrollTop >= maxScroll) {
										onScroll(length - 1);
										break;
									}
								}
							});
							var lastIndex = 0;
							//监听content滚动
							var onScroll = function(index) {
								if(lastIndex !== index) {
									lastIndex = index;
									var lastActiveElem = controlsElem.querySelector('.mui-active');
									lastActiveElem && (lastActiveElem.classList.remove('mui-active'));
									var currentElem = controlsElem.querySelector('.mui-control-item:nth-child(' + (index + 1) + ')');
									currentElem.classList.add('mui-active');
									//简单处理左侧分类滚动，要么滚动到底，要么滚动到顶
									var controlScrollTop = controlWrapperElem.scrollTop;
									if(controlScrollTop + controlWrapperHeight < controlTops[index]) {
										controlWrapperElem.scrollTop = controlMaxScroll;
									} else if(controlScrollTop > controlTops[index] - controlHeight) {
										controlWrapperElem.scrollTop = 0;
									}
								}
							};
							//滚动到指定content
							var scrollTo = function(index) {
								contentsElem.scrollTop = contentTops[index];
							};
							mui(controlsElem).on('tap', '.mui-control-item', function(e) {
								scrollTo(this.getAttribute('data-index'));
								return false;
							});
						})();
					}, // init end
					addNum: function(event) {
						//						var self = elem;
						if(event.currentTarget.classList == 'add') {
							console.log(event.currentTarget)
							mui.toast('ad')
						} else {
							mui.toast('del')
						}
					}
				}
			})
		</script>
	</body>

</html>